<!-- 我的记录 -->
<template>
    <div class="container">
        <div id="main">
            <div id="main1"></div>
            <div id="righttop">
                <h2>实时监测记录</h2>
                <div class="scroll-container">
                    <ul class="scroll-list">
                        <li v-for="(item, index) in list" :key="index">
                            {{ item }}
                        </li>
                    </ul>
                </div>
            </div>``
        </div>
        
        <div class="bottom">
            <h2>用户在线监测记录</h2>
            <template id="main2">
            <el-table :data="tableData" style="width: 100%;background-color: transparent;" >
                <el-table-column prop="id" label="用户"> </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="日期"
                ></el-table-column>
                <el-table-column prop="disease" label="疾病类型">
                </el-table-column>
                <el-table-column
                    prop="humidity"
                    label="平均相对湿度"
                ></el-table-column>
                <el-table-column
                    prop="precipitation"
                    label="降水"
                ></el-table-column>
                <el-table-column
                    prop="temperature"
                    label="平均温度"
                ></el-table-column>
                <el-table-column
                    prop="sunshine"
                    label="日照时长"
                ></el-table-column>
                <el-table-column prop="CO" label="CO"></el-table-column>
                <el-table-column prop="NO2" label="NO2"></el-table-column>
                <el-table-column prop="O3" label="O3"></el-table-column>
                <el-table-column prop="PMten" label="PM10"></el-table-column>
                <el-table-column prop="PMtwo" label="PM2.5"></el-table-column>
                <el-table-column prop="SO2" label="SO2"></el-table-column>
                <el-table-column prop="result" label="发病风险"></el-table-column>
            </el-table>
        </template>
        </div>
     
    </div>
</template>

<script>
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts";
import axios from "axios";
export default {
    name: "record",
    data() {
        return {
            tableData: [
                {
                    id: "li",
                    CO: 1,
                },
            ],
            list: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
            url1: "/diseaseRecord/getPredictionRecord/1",
            url2: "/diseaseRecord/getPredictionRecord/0",
        };
    },
    methods: {
        async loaddata() {
            let url = this.url2;
            try {
                await axios.get(url).then((res) => {
                    res.data.data.forEach((element) => {
                        element.id = 'admin'
                        element.result = element.result*100 + '%'
                        if (element.disease === 0) {
                            element.disease = "流感";
                        } else if (element.disease === 1) {
                            element.disease = "手足口病";
                        } else {
                            element.disease = "猩红热";
                        }
                    });
                    res.data.data.reverse()
                    this.tableData = res.data.data;
                });
            } catch (error) {
                console.error("读取 JSON 文件时发生错误:", error);
            }
            url = this.url1;
            try {
                await axios.get(url).then((res) => {
                    res.data.data.forEach((element) => {
                        if (element.disease === 0) {
                            element.disease = "流感";
                        } else if (element.disease === 1) {
                            element.disease = "手足口病";
                        } else {
                            element.disease = "猩红热";
                        }
                    });
                    let newObj = res.data.data.map((item) => {
                        return (
                            "日期：" +
                            item.createTime +
                            "  关于疾病" +
                            item.disease +
                            "  的预测结果为：" +
                            item.result/5
                        );
                    });
                    this.list = newObj
                });
            } catch (error) {
                console.error("读取 JSON 文件时发生错误:", error);
            }
        },
    },
    mounted() {
        this.loaddata();
        var myChart1 = echarts.init(document.getElementById("main1"));
        let option1 = {
            title: {
                text: "堆叠区域图",
            },
            tooltip: {
                trigger: "axis",
            },
            legend: {
                data: ["PM2.5", "SO2", "NO2"],
            },
            toolbox: {
                feature: {
                    saveAsImage: {},
                },
            },
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
            },
            xAxis: [
                {
                    type: "category",
                    boundaryGap: false,
                    data: [
                        "20243300332",
                        "202433005323",
                        "202442123328",
                        "202442123428",
                        "202442124254",
                        "202442124312",
                    ],
                },
            ],
            yAxis: [
                {
                    type: "value",
                },
            ],
            series: [
                {
                    name: "PM2.5",
                    type: "line",
                    stack: "总量",
                    areaStyle: { normal: {} },
                    data: [120, 132, 101, 134, 90, 230, 210],
                },
                {
                    name: "SO2",
                    type: "line",
                    stack: "总量",
                    areaStyle: { normal: {} },
                    data: [220, 182, 191, 234, 290, 330, 310],
                },
                {
                    name: "NO2",
                    type: "line",
                    stack: "总量",
                    areaStyle: { normal: {} },
                    data: [150, 232, 201, 154, 190, 330, 410],
                },
            ],
        };
        myChart1.setOption(option1);
    },
};
</script>
<style scoped>
.container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 1019px;
    padding-top: 60px;
    background: url(../../public/image/back4.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
h2 {
    text-align: center;
    height: 40px;
    font-size: 20px;
    line-height: 40px; /* 垂直居中 */
    margin-left: 20px;
    margin-right: 20px;
    background-color: white;
}
#main {
    display: flex;
    width: 100%;
    height: 500px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
#main1 {
    width: 50%;
    height: 500px;
}
#main2 {
    width: 100%;
    height: 500px;
    background-color: transparent; /* 可选：将#main2的背景也设置为透明 */
}
.bottom{
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;
    width: 1860px;
    height: 470px;
    background-color: white;


}
#righttop {
    width: 50%;
    height: 500px;
    margin-right: 20px;
    background-color: white;
    border-radius: 10px;
}
.scroll-container {
    overflow: hidden;
    height: 460px; /* 根据你的需求设置高度 */
    width: 100%;
    position: relative;
}

.scroll-list {
    width: 50%;
    white-space: nowrap;
    padding: 0;
    margin: 0 auto;
    list-style: none;
}

.scroll-list li {
    color: red;
    animation: scroll 10s linear infinite;
    padding: 10px;
}

@keyframes scroll {
    0% {
        transform: translateY(100%);
    }
    100% {
        transform: translateY(-1000%);
    }
}
</style>
